<template>
    <div>
        <el-form label-width="80">
            <el-form-item label="用户账号">
                <el-input type="text" v-model="willData.willOne.uid"></el-input>
            </el-form-item>
            <el-form-item label="选择楼层">
                <el-select placeholder="楼层选择" v-model="willData.seatData.fid">
                    <el-option v-for="floor in willData.floorList" :label="floor.floor" :value="floor.fid" />
                </el-select>
            </el-form-item>
            <el-form-item label="选择日期">
                <el-select v-model="willData.seatData.retruntime">
                    <el-option v-for="date in willData.dateList" :label="date" :value="dateFormat(date).ymd" />
                </el-select>
            </el-form-item>
            <el-form-item label="选择座位">
                <el-select v-model="willData.seatData.seatid" placeholder="座位选择">
                    <el-option v-for="seat in willData.seatList" :label="seat.seatid" :value="seat.id"
                        :disabled="!seat.use">
                        <div class="item" style="display: flex; justify-content: space-between;">
                            <span>{{ seat.seatid }}-{{ seat.typeseatList.type }}</span>
                            <span :style="seat.use ? 'color:green' : 'color:red'">{{ seat.use ? '可预约' : '预约满' }}</span>
                        </div>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择时间">
                <el-select v-model="willData.willOne.timeperiod">
                    <el-option v-for="time in willData.timeList" :label="time.remark" :value="time.timeid"
                        :disabled="!time.state">
                        <div class="item" style="display: flex; justify-content: space-between;">
                            <span>{{ time.starttime }}-{{ time.endtime }}</span>
                            <span :style="time.state ? 'color:green' : 'color:red'">{{ time.state ? '空' : '满' }}</span>
                        </div>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form>
                <el-button type="primary" style="width: 100%;" @click="willDo" v-if="!props.willOne">预约</el-button>
            </el-form>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { reqGetListPlust, reqAddWillList, reqGetTimeListPlus } from '@/api/common'
import { reqGetFloorList } from '@/api/common'
import { FloorType } from '@/types/floor'
import { Seat } from '@/types/seat'
import { TimeList } from '@/types/will'
import { WillType } from '@/types/will'
import { tip } from '@/utils/alert'
import dateFormat from '@/utils/dateFormat'
import { watch } from 'vue'
import { onMounted } from 'vue'
import { reactive } from 'vue'


const willData = reactive<{ willOne: WillType, dateList: any[], floorList: FloorType[], seatData: any, isShowSeat: boolean, seatList: Seat[], timeList: TimeList[] }>({
    willOne: {
        seatid: -1,
        timeperiod: '',
        uid: '',
        retruntime: '',
    },
    dateList: [],
    floorList: [],
    isShowSeat: false,
    seatList: [],
    seatData: {
        fid: null,
        retruntime: '',
        seatid: null
    },
    timeList: []
})

const emits = defineEmits(['emitAdd'])

watch(() => willData.seatData, (newVal) => {
    console.log(newVal);

    if (newVal.fid != null && newVal.retruntime != '') {
        reqGetListPlust(newVal).then(res => {
            willData.seatList = res.data.data
            if (newVal.seatid != -1) {
                reqGetTimeListPlus({ seatid: newVal.seatid, retruntime: newVal.retruntime }).then(res => {
                    willData.timeList = res.data.data
                })
            }
        })

    }

}, { deep: true, immediate: true })

const dataList = () => {
    for (let i = 0; i < 7; i++) {
        let time: any = new Date().setDate(new Date().getDate() + i)
        willData.dateList.push(dateFormat(time).ymd)
    }
}


const willDo = () => {

    const { seatid, retruntime } = willData.seatData
    willData.willOne.seatid = seatid
    willData.willOne.retruntime = retruntime
    console.log(willData.willOne);
    reqAddWillList(willData.willOne).then(res => {
        if (res.data.data != null) {
            tip(res.data.info, 'success')
            emits('emitAdd', false)
            willData.seatData = {
                fid: null,
                retruntime: '',
                seatid: null
            }
            willData.willOne = {
                seatid: -1,
                timeperiod: '',
                uid: '',
                retruntime: '',
            }

        } else {
            tip("输入有效信息", 'error')
        }

    })
}



const props=defineProps<{
    willOne:WillType|null
}>()

watch(()=>props.willOne,()=>{
    console.log(props.willOne);
    
    if(props.willOne){
        const {uid,seatid,timeperiod,retruntime}=props.willOne
        willData.willOne.uid=uid
        willData.willOne.timeperiod=timeperiod
        willData.seatData.seatid=seatid
        willData.seatData.retruntime=retruntime
    }else{

    }
})






const getFloor = async () => {
    let res = await reqGetFloorList()
    willData.floorList = res.data.data
}

onMounted(() => {
    dataList()
    getFloor()
})

</script>

<style lang="scss" scoped></style>